import {Component} from 'react'
import './Header.css'

class Header extends Component{
    render() {
        return (
            <div className='header'>
                <header>
                    <span>ToDoList</span>
                    <input placeholder='添加todo' onKeyUp={
                        (e) => {
                            if(e.keyCode === 13){
                                // 点击回车就把把内容和状态传到父组件
                                this.props.fn({
                                    name:e.target.value,
                                    status:'pending'
                                })
                                // 清空输入框
                                e.target.value = ''
                            }
                        }
                    } />
                </header>
            </div>
        )
    }
}

export default Header